<!--
 * @Author: guojinxin_hub 1907745233@qq.com
 * @Date: 2024-09-13 15:43:52
 * @LastEditors: guojinxin_hub 1907745233@qq.com
 * @LastEditTime: 2024-09-19 14:19:15
 * @FilePath: \new-yongqing\src\Views\home\Overall\components\Left.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <Left_box>
    <LeaseTitle imgSrc="population.png">人口近况</LeaseTitle>
    <div style="margin-left: 38px; margin-top: 4px">
      <SubTitle title-text="人口概览" :width="312" />
      <V3Echarts
        :height="368"
        :width="602"
        :options="Option1()"
        container="overall1"
      />
      <div style="margin-top: 31px">
        <SubTitle title-text="人口金字塔" width="312" />
        <V3Echarts
          :height="368"
          :width="602"
          :options="Option2()"
          container="overall2"
        ></V3Echarts>
      </div>
    </div>
    <LeaseTitle imgSrc="经济情况.png">经济情况</LeaseTitle>
    <div style="margin-left: 38px; margin-top: 8px">
      <SubTitle title-text="GDP情况" width="312" />
      <V3Echarts
        :height="368"
        :width="602"
        :options="Option3()"
        container="overall3"
      ></V3Echarts>
    </div>
  </Left_box>
</template>

<script lang="ts" setup>
import Left_box from '@/components/left_box.vue'
import LeaseTitle from '@/components/Lease_title/index.vue'
import SubTitle from '@/components/SubTitle/SubTitle.vue'
import V3Echarts from '@/components/V3Echarts/index.vue'
import { Option1, Option2, Option3 } from './echartsoptions'
</script>

<style lang="scss" scoped></style>
